<template>
    <div class="basic-table">
        <n-data-table v-bind="getBindValues" :row-key="(row) => row.id" :columns="columns" :data="data" remote
            :pagination="pagination" :paginate-single-page="false" @update:page="updatePage">
            <template #empty>
                <div class="table_empty">暂无数据</div>
            </template>
        </n-data-table>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { NDataTable, NButton } from 'naive-ui';

const emits = defineEmits(['update:page', 'update:page-size'])

const props = defineProps({
    columns: {
        type: Array as () => Array<{ title: string; key: string }>,
        required: true,
    },
    data: {
        type: Array,
        default: () => [],
    },
    pagination: {
        type: Object,
    }
});

const getBindValues = computed(() => ({
    bordered: true,
    striped: true,
}));

const updatePage = (page) => {
    emits('update:page', page);
};

const reload = () => {
    updatePage(1)
};
</script>

<style scoped>
.basic-table {
    padding: 16px 0;
}

.table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.table_empty {
    color: #afafaf;
}
</style>